<template>
  <div>
    <Tou></Tou>
    <Second></Second>
    <div style="width: 1200px;height: 800px;margin: 0 auto;border: 1px solid #5199FD">
      <template>
        <el-tabs v-model="activeName" type="card">
          <el-tab-pane label="未支付订单" name="first">
            <template>
              <el-table
                :data="zero()"
                stripe
                style="width: 100%">
                <el-table-column
                  prop="tlTicket.ticketId"
                  label="车票id"
                >
                </el-table-column>
                <el-table-column
                  prop="userName"
                  label="用户昵称"
                >
                </el-table-column>
                <el-table-column
                  prop="personName"
                  label="乘车姓名">
                </el-table-column>
                <el-table-column
                  prop="tlTicket.ticketCarname"
                  label="车次">
                </el-table-column>
                <el-table-column
                  prop="tlTicket.ticketStartaddr"
                  label="起始地点">
                </el-table-column>
                <el-table-column
                  prop="tlTicket.ticketStarttime"
                  label="起始时间">
                </el-table-column>
                <el-table-column
                  prop="tlTicket.ticketEndaddr"
                  label="终点地点">
                </el-table-column>
                <el-table-column
                  prop="tlTicket.ticketEndtime"
                  label="到达时间">
                </el-table-column>
                <el-table-column
                  prop="tlTicket.ticketFlag"
                  label="车票状态"
                  show-overflow-tooltip>
                  <template slot-scope="scope">
                    <span :style="scope.row.tlTicket.ticketFlag === 1 ? { color: 'green','font-weight': 'bold' } : { color: 'red','font-weight': 'bold' }">
                      {{ scope.row.tlTicket.ticketFlag === 1 ? '已支付' : '未支付' }}
                    </span>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="tlTicket.ticketPrice"
                  label="车票价格">
                </el-table-column>
                <el-table-column
                  prop="tlTicket.ticketLev"
                  label="座位">
                  <template slot-scope="scope"> {{
                      scope.row.tlTicket.ticketLev === 0 ? '一等座' : (scope.row.tlTicket.ticketLev === 1 ? '二等座' : '无座')
                    }}
                  </template>
                </el-table-column>
                <el-table-column label="操作" width="150">
                  <template slot-scope="scope">
                    <el-button
                      size="mini"
                      type="success"
                      @click="topay(scope.row.tlTicket.ticketId,scope.row.tlTicket.ticketPrice)">支付</el-button>
                    <el-button
                      size="mini"
                      type="danger"
                      @click="handleDelete(scope.row.tlTicket.ticketId)">取消</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </template>
          </el-tab-pane>
          <el-tab-pane label="已支付订单" name="second">
            <template>
              <el-table
                :data="one()"
                stripe
                style="width: 100%">
                <el-table-column
                  prop="tlTicket.ticketId"
                  label="车票id"
                >
                </el-table-column>
                <el-table-column
                  prop="userName"
                  label="用户昵称"
                >
                </el-table-column>
                <el-table-column
                  prop="personName"
                  label="乘车人姓名">
                </el-table-column>
                <el-table-column
                  prop="tlTicket.ticketCarname"
                  label="车次">
                </el-table-column>
                <el-table-column
                  prop="tlTicket.ticketStartaddr"
                  label="起始地点">
                </el-table-column>
                <el-table-column
                  prop="tlTicket.ticketStarttime"
                  label="起始时间">
                </el-table-column>
                <el-table-column
                  prop="tlTicket.ticketEndaddr"
                  label="终点地点">
                </el-table-column>
                <el-table-column
                  prop="tlTicket.ticketEndtime"
                  label="到达时间">
                </el-table-column>
                <el-table-column
                  prop="tlTicket.ticketFlag"
                  label="车票状态"
                  show-overflow-tooltip>
                  <template slot-scope="scope">
                    <span :style="scope.row.tlTicket.ticketFlag === 1 ? { color: 'green','font-weight': 'bold' } : { color: 'red','font-weight': 'bold' }">
                      {{ scope.row.tlTicket.ticketFlag === 1 ? '已支付' : '未支付' }}
                    </span>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="tlTicket.ticketPrice"
                  label="车票价格">
                </el-table-column>
                <el-table-column
                  prop="tlTicket.ticketLev"
                  label="座位">
                  <template slot-scope="scope"> {{
                      scope.row.tlTicket.ticketLev === 0 ? '一等座' : (scope.row.tlTicket.ticketLev === 1 ? '二等座' : '无座')
                    }}
                  </template>
                </el-table-column>
                <el-table-column label="操作" width="150">
                  <template slot-scope="scope">
                    <el-button
                      size="mini"
                      type="warning"
                      @click="refund(scope.row.tlTicket.ticketId,scope.row.tlTicket.ticketPrice)">退款</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </template>
          </el-tab-pane>
          <el-tab-pane label="全部订单" name="third">
            <template>
              <el-table
                :data="tableData"
                stripe
                style="width: 100%">
                <el-table-column
                  prop="tlTicket.ticketId"
                  label="车票id"
                >
                </el-table-column>
                <el-table-column
                  prop="userName"
                  label="用户昵称"
                >
                </el-table-column>
                <el-table-column
                  prop="personName"
                  label="乘车人姓名">
                </el-table-column>
                <el-table-column
                  prop="tlTicket.ticketCarname"
                  label="车次">
                </el-table-column>
                <el-table-column
                  prop="tlTicket.ticketStartaddr"
                  label="起始地点">
                </el-table-column>
                <el-table-column
                  prop="tlTicket.ticketStarttime"
                  label="起始时间">
                </el-table-column>
                <el-table-column
                  prop="tlTicket.ticketEndaddr"
                  label="终点地点">
                </el-table-column>
                <el-table-column
                  prop="tlTicket.ticketEndtime"
                  label="到达时间">
                </el-table-column>
                <el-table-column
                  prop="tlTicket.ticketFlag"
                  label="车票状态"
                  show-overflow-tooltip>
                  <template slot-scope="scope">
                    <span :style="scope.row.tlTicket.ticketFlag === 1 ? { color: 'green','font-weight': 'bold' } : { color: 'red','font-weight': 'bold' }">
                      {{ scope.row.tlTicket.ticketFlag === 1 ? '已支付' : '未支付' }}
                    </span>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="tlTicket.ticketPrice"
                  label="车票价格">
                </el-table-column>
                <el-table-column
                  prop="tlTicket.ticketLev"
                  label="座位">
                  <template slot-scope="scope"> {{
                      scope.row.tlTicket.ticketLev === 0 ? '一等座' : (scope.row.tlTicket.ticketLev === 1 ? '二等座' : '无座')
                    }}
                  </template>
                </el-table-column>
              </el-table>
            </template>
          </el-tab-pane>
        </el-tabs>
      </template>
    </div>
    <img :src="url">
  </div>
</template>

<script>
import Tou from "./tou.vue";
import Second from "./second.vue";

export default {
  name: "order",
  components: {Second, Tou},
  data() {
    return {
      url:'',
      activeName: 'first',
      tableData: [
        {
          userName: '',
          personFlag:'',
          personName: '',
          tlTicket: {
            ticketId: '',
            userId: '',
            personId: '',
            ticketCarname: '',
            ticketStartaddr: '',
            ticketStarttime: '',
            ticketEndaddr: '',
            ticketEndtime: '',
            ticketFlag: '',
            ticketPrice: '',
            ticketLev: ''
          }
        }
      ],
    }
  },
  methods: {
    loadFindAll() {
      this.$axios.get('/ticket/findAll')
        .then(res => {
          if (res.data.code == 200) {
            this.tableData = res.data.data;
            this.tableData.forEach(item=>{
              if (item.tlTicket.ticketLev==0){//一等座
                if (item.personFlag == 1) {
                  item.tlTicket.ticketPrice = item.tlTicket.ticketPrice * 0.8;//学生*0.8
                }else if(item.personFlag == 2){
                  item.tlTicket.ticketPrice = item.tlTicket.ticketPrice *0.5;//儿童*0.5
                }
              }
              if (item.tlTicket.ticketLev==1||item.tlTicket.ticketLev==2) {//二等或无座
                if (item.personFlag==0){//成人
                  item.tlTicket.ticketPrice = item.tlTicket.ticketPrice * 0.8;//二等*0.8
                }
                if (item.personFlag == 1) {//乘车人是学生
                  item.tlTicket.ticketPrice = item.tlTicket.ticketPrice * 0.8 * 0.8;//二等座或者无座*0.8,学生*0.8
                }else if (item.personFlag == 2){//儿童
                  item.tlTicket.ticketPrice = item.tlTicket.ticketPrice * 0.8 * 0.5;//二等座或者无座*0.8,儿童*0.5
                }
              }
            })
            // console.log(res.data.data)
          } else if (res.data.code == 222) {
            // alert("暂无订单")
          }
        })
    },
    zero() {
      return this.tableData.filter(item => item.tlTicket.ticketFlag == 0)
    },
    one() {
      return this.tableData.filter(item => item.tlTicket.ticketFlag === 1)
    },
    //支付
    topay(ticketId,ticketPrice) {
      this.$axios.post("/ticket/topay",{
        ticketId:ticketId,
        ticketPrice:ticketPrice
      }).then(data=>{
        if (data.data.code==200){
          this.url=data.data.data
          this.$router.push({path:'/pay',query:{url:data.data.data}})
        }else {
          this.$message.error('支付失败');
        }
      })
    },
    //取消订单
    handleDelete(ticketId) {
      this.$axios.get('/ticket/delete',{
        params:{
          ticketId:ticketId
        }
      })
        .then(res=>{
          if (res.data.code==200)
            location.reload()
          else if (res.data.code==225)
            this.$message.error('订单取消失败');
        })
    },
    //退款
    refund(ticketId,ticketPrice){
      this.$axios.post('/ticket/refund',{
        ticketId:ticketId,
        ticketPrice:ticketPrice
      }).then(res=>{
        if (res.data.code==200){
          this.$message.success("退款成功,订单已删除");
          this.loadFindAll();
        }else{
          this.$message.error("退款失败");
        }
      })
    },
  },
  mounted() {
    this.loadFindAll();
  }
}
</script>

<style scoped>

</style>
